import React from 'react';
import {useHistory} from 'react-router-dom';

import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import IconButton from '@material-ui/core/IconButton'
import AppBar from '@material-ui/core/AppBar';
import CameraIcon from '@material-ui/icons/PhotoCamera';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

import {request} from '../../../../request';

function Index(props) {
    const nickName = props.nickName;

    const history = useHistory();

    const handleClick = () => {
        request({
            url: '/user/logout',
            method: 'GET'
        }).then(res => { })
        sessionStorage.removeItem("token");
        history.replace('/login');
    }

    return (
        <AppBar position="relative">
            <Toolbar>
                <CameraIcon sx={{ mr: 2 }} />
                <Typography variant="h6" color="inherit" align="left" sx={{ flex: 1 }} noWrap>
                Daily Life
                </Typography>
                <Typography variant="h7" color="inherit" align="right" sx={{ flex: 1 }} noWrap>
                    欢迎,{nickName}
                </Typography>
                <IconButton onClick={handleClick}>
                    <ExitToAppIcon />
                </IconButton>
            </Toolbar>
        </AppBar>
    );
}

export default Index;